<script lang="ts" setup>
import { createViewer } from '@utils/cesium';
import { viewerKey } from '@/assets/keys/example.keys';

const viewerRef = ref<HTMLElement>();
const viewer = shallowRef();

provide(viewerKey, viewer);

onMounted(() => {
  viewer.value = createViewer(viewerRef.value!);
});
</script>

<template>
  <div ref="viewerRef" class="viewer-container">
    <slot />
  </div>
</template>

<style scoped>
.viewer-container {
  height: 100%;
}
</style>
